<template>
	<view>
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image class="avatar" :src="avatarUrl"></image>
		</button>
		<view class="container">
			<u-form>
				<u-form-item label="昵称">
					<input type="nickname" class="weui-input" placeholder="请输入昵称" />
				</u-form-item>
			</u-form>
		</view>

	</view>
</template>

<script>
	//https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html

	export default {
		data() {
			return {
				avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
			}
		},
		methods: {
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				this.avatarUrl = avatarUrl
			},
			//允许转发的默认函数
			onShareAppMessage: function() {}

		}
	}
</script>


<style>
	.avatar-wrapper {
		padding: 0;
		width: 56px !important;
		border-radius: 8px;
		margin-top: 40px;
		margin-bottom: 40px;
	}

	.avatar {
		display: block;
		width: 56px;
		height: 56px;
	}

	.container {
		display: flex;
	}
</style>